<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500"> </canvas>
		<script type="text/javascript">
			var canvas=document.getElementById("myCanvas");
			var taiji=canvas.getContext("2d");
			
			taiji.fillStyle="green";
			taiji.fillRect(0,0,500,500);
			
			taiji.beginPath();
			taiji.arc(250,250,200,0,Math.PI);
			taiji.fillStyle="#000000"
			taiji.fill();
			
			taiji.beginPath();
			taiji.arc(250,250,200,0,Math.PI,true);
			taiji.fillStyle="#FFFFFF"
			taiji.fill();
			
			taiji.beginPath();
			taiji.arc(350,250,100,0,2*Math.PI,true);
			taiji.fillStyle="#000000"
			taiji.fill();
			
			taiji.beginPath();
			taiji.arc(150,250,100,0,2*Math.PI,true);
			taiji.fillStyle="#FFFFFF"
			taiji.fill();
			
			
			taiji.beginPath();
			taiji.arc(350,250,20,0,4*Math.PI,true);
			taiji.fillStyle="#FFFFFF"
			taiji.fill();
			
			taiji.beginPath();
			taiji.arc(150,250,20,0,4*Math.PI,true);
			taiji.fillStyle="#000000"
			taiji.fill();
			
		</script>
	</body>
</html>

